<template>
  <div>
    <ul>
      <li><a class="active" @click="home">主页</a></li>
      <li><a @click="login">登录</a></li>
      <li><a href="http://zcy12138.tpddns.cn:8002" target="_blank">示例网站</a></li>
      <li><a href="https://github.com/bailicangdu/node-elm/blob/master/API.md" target="_blank">API接口</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "demo-nav",
  methods:{
    home(){
      this.$router.push("/home")
    },
    login(){
      this.$router.push("/login")
    }
  }
}
</script>

<style scoped>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>